<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品缺陷检测系统</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="./static/js/detect.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        warning: '#FF9F43',
                        danger: '#FF5252',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
            }
            .text-balance {
                text-wrap: balance;
            }
            .gradient-bg {
                background: linear-gradient(135deg, #165DFF 0%, #0F3AAA 100%);
            }
        }
    </style>
    <style>
        .preview-image {
            display: block;
            width: 100%;
        }

        .result-canvas {
            max-width: 100%;
        }
    </style>
</head>
<body class="font-inter bg-light text-dark antialiased">
    <!-- 导航栏 -->
    <header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-white shadow-md" id="navbar">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <a href="#" class="flex items-center space-x-2">
                    <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
                        <i class="fa fa-search-plus text-white text-xl"></i>
                    </div>
                    <span class="text-xl font-bold">缺陷检测系统</span>
                </a>
                
                <!-- 桌面导航 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#detect" class="text-dark hover:text-primary transition-colors font-medium">在线检测</a>
                    <a href="#results" class="text-dark hover:text-primary transition-colors font-medium">结果示例</a>
                    <a href="#defects" class="text-dark hover:text-primary transition-colors font-medium">缺陷类型</a>
                </nav>
                
                <!-- 移动端菜单按钮 -->
                <button class="md:hidden text-dark focus:outline-none" id="menuBtn">
                    <i class="fa fa-bars text-2xl"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div class="md:hidden hidden bg-white shadow-lg absolute w-full" id="mobileMenu">
            <div class="container mx-auto px-4 py-4 flex flex-col space-y-4">
                <a href="#detect" class="text-dark hover:text-primary transition-colors py-2 font-medium">在线检测</a>
                <a href="#results" class="text-dark hover:text-primary transition-colors py-2 font-medium">结果示例</a>
                <a href="#defects" class="text-dark hover:text-primary transition-colors py-2 font-medium">缺陷类型</a>
            </div>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section id="hero" class="pt-28 pb-16 md:pt-40 md:pb-24 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-primary/10 to-primary/5 z-0"></div>
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight mb-6">
                    高精度<span class="text-primary">产品缺陷检测</span>
                </h1>
                <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto text-balance">
                    上传CCD相机拍摄的产品照片，我们的系统将自动检测并分析产品缺陷，提供详细的检测报告。
                </p>
                <a href="#detect" class="inline-flex items-center px-8 py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-all transform hover:scale-105 shadow-lg hover:shadow-primary/20">
                    开始检测 <i class="fa fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 在线检测 -->
    <section id="detect" class="py-20 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">在线检测</h2>
                <p class="text-gray-600 max-w-2xl mx-auto text-balance">
                    上传CCD相机拍摄的产品照片，我们的系统将自动检测并分析产品缺陷，提供详细的检测报告。
                </p>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12" id="detect-app">
                <!-- 上传区域 -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                    <div class="p-6 border-b border-gray-100">
                        <h3 class="text-xl font-bold">上传照片</h3>
                        <p class="text-gray-600 mt-2">
                            请上传产品正面或侧面的高清照片，系统将分别进行缺陷检测。
                        </p>
                    </div>
                    
                    <!-- 检测面选择 -->
                    <div class="p-6 border-b border-gray-100" v-show="false">
                        <h4 class="font-medium mb-4">选择检测面</h4>
                        <div class="flex space-x-6">
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" v-model="detectionSide" value="front" class="w-4 h-4 text-primary focus:ring-primary rounded">
                                <span class="ml-2 text-gray-700">正面</span>
                            </label>
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" v-model="detectionSide" value="side" class="w-4 h-4 text-primary focus:ring-primary rounded">
                                <span class="ml-2 text-gray-700">侧面</span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="p-6">
                        <div class="space-y-8">
                            <!-- 正面照片上传 -->
                            <div>
                                <h4 class="font-medium mb-4">{{ detectMode }}照片</h4>
                                <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-primary transition-colors cursor-pointer" @click="activeSelectImage">
                                    <input type="file" id="frontImageInput" class="hidden" accept="image/*" @change="onFileChange" ref="imageInput">
                                    <i class="fa fa-cloud-upload text-4xl text-gray-400 mb-4"></i>
                                    <p class="text-gray-600 mb-2">拖放{{ detectMode }}照片到这里，或</p>
                                    <button type="button" class="text-primary font-medium" id="frontImageBtn">点击上传</button>
                                    <p class="text-xs text-gray-500 mt-4">支持 JPG、PNG、BMP 格式，文件大小不超过10MB</p>
                                </div>
                                <div class="mt-4 image-wrap" v-if="!images?.length">
                                    <div class="image-preview-wrap">
                                        <img class="preview-image" alt="样例图片" :src="exampleImage">
                                        <h5 class="text-center text-green-500">样例图片</h5>
                                    </div>
                                </div>
                                <div class="mt-4" v-for="(image, index) in images">
                                    <div class="relative">
                                        <img id="frontImage" :src="image" alt="正面照片预览" class="w-full h-auto rounded-lg">
                                        <button type="button" class="absolute top-2 right-2 w-8 h-8 bg-white/80 rounded-full flex items-center justify-center text-gray-600 hover:text-danger transition-colors" @click="removeImage">
                                            <i class="fa fa-times"></i>
                                        </button>
                                    </div>
                                    <div class="flex justify-between mt-2">
                                        <span class="text-sm text-gray-600">{{ files[index].name }}</span>
                                        <span class="text-sm font-medium text-danger" v-if="!results[index]">未检测</span>
                                        <span class="text-sm font-medium text-green-500" v-else>已检测</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 检测选项 -->
                            <div>
                                <h4 class="font-medium mb-4">检测选项</h4>
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                    <div class="flex items-center">
                                        <input type="checkbox" id="detectChipping" class="w-4 h-4 text-primary focus:ring-primary rounded" v-model="options.detectChipping">
                                        <label for="detectChipping" class="ml-2 text-gray-700">检测掉角</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="checkbox" id="detectCrack" class="w-4 h-4 text-primary focus:ring-primary rounded" v-model="options.detectCrack">
                                        <label for="detectCrack" class="ml-2 text-gray-700">检测裂纹</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="checkbox" id="detectBubble" class="w-4 h-4 text-primary focus:ring-primary rounded" v-model="options.detectBubble">
                                        <label for="detectBubble" class="ml-2 text-gray-700">检测镀层起泡</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="checkbox" id="detectPit" class="w-4 h-4 text-primary focus:ring-primary rounded" v-model="options.detectPit">
                                        <label for="detectPit" class="ml-2 text-gray-700">检测砂眼</label>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <h4 class="font-medium mb-4">其他选项</h4>
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="w-4 h-4 text-primary focus:ring-primary rounded" v-model="options.enableAutoDefect" id="autoDefectMode">
                                        <label for="autoDefectMode" class="ml-2 text-gray-700">自动上传并检测</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="checkbox" class="w-4 h-4 text-primary focus:ring-primary rounded" @change="toggleDebugMode" id="outputDebugInfo">
                                        <label for="outputDebugInfo" class="ml-2 text-gray-700">输出调试信息</label>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 检测按钮 -->
                            <button type="button" class="w-full py-3 bg-primary text-white font-medium rounded-lg cursor-not-allowed flex items-center justify-center" 
                                    v-if="disableDetect">
                                <i class="fa fa-search mr-2"></i>
                                立即检测
                            </button>
                            <button type="button" class="w-full py-3 bg-primary text-white font-medium rounded-lg hover:bg-primary/90 transition-all transform hover:scale-[1.02] flex items-center justify-center" 
                                    v-else @click="uploadAndDefect">
                                <i class="fa fa-search mr-2"></i>
                                立即检测
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 结果展示 -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                    <div class="p-6 border-b border-gray-100">
                        <h3 class="text-xl font-bold">检测结果</h3>
                        <p class="text-gray-600 mt-2" v-if="!results?.length">
                            请上传照片并点击"立即检测"按钮
                        </p>
                        <p class="text-gray-600 mt-2" v-else>
                            检测已完成
                        </p>
                    </div>
                    
                    <div class="p-6" v-if="detecting && !result?.length">
                        <!-- 加载状态 -->
                        <div class="text-center py-12">
                            <div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent mb-4"></div>
                            <p class="text-gray-600">正在进行缺陷检测，请稍候...</p>
                            <p class="text-sm text-gray-500 mt-2">检测时间通常为1-3秒 (受网络状况影响)</p>
                        </div>
                    </div>

                    <div class="p-6" :class="{'hidden': !results.length}">
                        <!-- 结果展示 -->
                        <div id="detectionResults" v-for="(result, index) in results">
                            <!-- 检测结果 -->
                            <div class="mb-8">
                                <h4 class="font-bold mb-3">{{ detectMode }}照片检测结果</h4>
                                <div class="relative rounded-lg overflow-hidden mb-4" id="frontResultImageContainer">
                                    <canvas :id="'canvas-' + index" class="result-canvas"></canvas>
                                    <div class="absolute top-3 right-3 bg-primary text-white text-xs font-bold px-3 py-1 rounded-full" id="frontDefectCount">
                                        {{ result.reportTotalDefects }}处缺陷
                                    </div>
                                </div>
                                <div class="space-y-3">
                                    <!-- 缺陷列表将动态生成 -->
                                    <div class="p-4 bg-gray-50 rounded-lg" v-for="(item, index) in result.defects">
                                        <div class="flex justify-between">
                                            <h5 class="font-medium">
                                                缺陷{{ index + 1 }}
                                                : 
                                                {{ showDefectType ? item.typeLabel : '' }}
                                                <!-- ({{ item.confidence.toFixed(2) }}) -->
                                            </h5>
                                            <span class="text-green-500" v-if="item.level == 1">{{ item.levelLabel }}</span>
                                            <span class="text-warning" v-else-if="item.level == 2">{{ item.levelLabel }}</span>
                                            <span class="text-danger" v-else-if="item.level == 3">{{ item.levelLabel }}</span>
                                        </div>
                                        <p class="text-sm text-gray-600 mt-2">
                                            位置: X={{ item.location.x }}px, Y={{ item.location.y }}px | 尺寸: {{ item.size.width }}mm × {{ item.size.height }}mm
                                        </p>
                                    </div>
                                </div>
                            </div>
                                                        
                            <!-- 检测报告 -->
                            <div class="mt-8 pt-6 border-t border-gray-100">
                                <h4 class="font-bold mb-4">检测报告</h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div class="p-4 bg-gray-50 rounded-lg">
                                        <div class="flex justify-between items-center">
                                            <span class="text-gray-600">检测时间</span>
                                            <span class="font-medium">{{ result.reportTime }}</span>
                                        </div>
                                    </div>
                                    <div class="p-4 bg-gray-50 rounded-lg">
                                        <div class="flex justify-between items-center">
                                            <span class="text-gray-600">检测耗时</span>
                                            <span class="font-medium">{{ result.reportDuration }}秒</span>
                                        </div>
                                    </div>
                                    <div class="p-4 bg-gray-50 rounded-lg">
                                        <div class="flex justify-between items-center">
                                            <span class="text-gray-600">总缺陷数</span>
                                            <span class="font-medium">{{ result.reportTotalDefects }}</span>
                                        </div>
                                    </div>
                                    <div class="p-4 bg-gray-50 rounded-lg">
                                        <div class="flex justify-between items-center">
                                            <span class="text-gray-600">检测结果</span>
                                            <span class="font-medium text-green-500" v-if="result.access">{{ result.reportResult }}</span>
                                            <span class="font-medium text-danger" v-else>{{ result.reportResult }}</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mt-4">
                                    <button type="button" class="w-full py-2 border border-primary text-primary font-medium rounded-lg hover:bg-primary/5 transition-colors flex items-center justify-center">
                                        <i class="fa fa-download mr-2"></i> 下载完整报告
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 结果示例 -->
    <section id="results" class="py-20">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">检测结果示例</h2>
                <p class="text-gray-600 max-w-2xl mx-auto text-balance">
                    通过我们的缺陷检测系统，可以清晰地识别出产品表面的各类缺陷，并进行精准定位和分析。
                </p>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12" id="examples-app">
                <!-- 检测结果 -->
                <!-- <div>
                    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                        <div class="p-6 border-b border-gray-100">
                            <div class="flex justify-between items-center">
                                <h3 class="text-xl font-bold">产品正面检测</h3>
                                <span class="px-3 py-1 bg-danger/10 text-danger text-sm font-medium rounded-full">
                                    发现3处缺陷
                                </span>
                            </div>
                        </div>
                        <div class="p-6">
                            <div class="relative rounded-lg overflow-hidden">
                                <img src="https://picsum.photos/id/26/800/500" alt="产品正面检测结果" class="w-full h-auto">
                                <div class="absolute top-1/4 left-1/3 w-16 h-16 border-2 border-danger rounded-full flex items-center justify-center">
                                    <span class="text-danger font-bold">1</span>
                                </div>
                                <div class="absolute top-1/2 left-1/2 w-16 h-16 border-2 border-danger rounded-full flex items-center justify-center">
                                    <span class="text-danger font-bold">2</span>
                                </div>
                                <div class="absolute bottom-1/4 right-1/3 w-16 h-16 border-2 border-danger rounded-full flex items-center justify-center">
                                    <span class="text-danger font-bold">3</span>
                                </div>
                            </div>
                            <div class="mt-6">
                                <h4 class="font-bold mb-4">缺陷详情</h4>
                                <div class="space-y-4">
                                    <div class="p-4 bg-gray-50 rounded-lg">
                                        <div class="flex justify-between">
                                            <h5 class="font-medium">缺陷1: 镀层起泡</h5>
                                            <span class="text-danger">严重</span>
                                        </div>
                                        <p class="text-sm text-gray-600 mt-2">
                                            位置: X=120px, Y=80px | 尺寸: 5.2mm × 3.8mm
                                        </p>
                                    </div>
                                    <div class="p-4 bg-gray-50 rounded-lg">
                                        <div class="flex justify-between">
                                            <h5 class="font-medium">缺陷2: 砂眼</h5>
                                            <span class="text-warning">中等</span>
                                        </div>
                                        <p class="text-sm text-gray-600 mt-2">
                                            位置: X=240px, Y=150px | 尺寸: 2.3mm × 1.9mm
                                        </p>
                                    </div>
                                    <div class="p-4 bg-gray-50 rounded-lg">
                                        <div class="flex justify-between">
                                            <h5 class="font-medium">缺陷3: 裂纹</h5>
                                            <span class="text-danger">严重</span>
                                        </div>
                                        <p class="text-sm text-gray-600 mt-2">
                                            位置: X=350px, Y=200px | 长度: 8.7mm
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->
                
                <!-- 检测结果 -->
                <div v-for="example in examples">
                    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                        <div class="p-6 border-b border-gray-100">
                            <div class="flex justify-between items-center">
                                <h3 class="text-xl font-bold">{{ example.title || '产品侧面检测' }}</h3>
                                <span class="px-3 py-1 bg-warning/10 text-warning text-sm font-medium rounded-full">
                                    发现{{example.defects.length}}处缺陷
                                </span>
                            </div>
                        </div>
                        <div class="p-6">
                            <div class="relative rounded-lg overflow-hidden">
                                <img :src="example.image" alt="产品侧面检测结果" class="w-full h-auto">
                            </div>
                            <div class="mt-6">
                                <h4 class="font-bold mb-4">缺陷详情</h4>
                                <div class="space-y-4" v-for="(item, index) in example.defects">
                                    <div class="p-4 bg-gray-50 rounded-lg">
                                        <div class="flex justify-between">
                                            <h5 class="font-medium">
                                                缺陷{{ index + 1 }}
                                                : 
                                                {{ item.typeLabel }}
                                            </h5>
                                            <span class="text-green-500" v-if="item.level == 1">{{ item.levelLabel }}</span>
                                            <span class="text-warning" v-else-if="item.level == 2">{{ item.levelLabel }}</span>
                                            <span class="text-danger" v-else-if="item.level == 3">{{ item.levelLabel }}</span>
                                        </div>
                                        <p class="text-sm text-gray-600 mt-2">
                                            位置: X={{ item.location.x }}px, Y={{ item.location.y }}px | 尺寸: {{ item.size.width }}mm × {{ item.size.height }}mm
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 缺陷类型 -->
    <section id="defects" class="py-20 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">常见缺陷类型</h2>
                <p class="text-gray-600 max-w-2xl mx-auto text-balance">
                    我们的系统能够精准识别多种类型的产品缺陷，确保产品质量符合高标准要求。
                </p>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- 缺陷类型1 -->
                <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                    <div class="rounded-lg bg-danger/10 flex items-center justify-center mb-6">
                        <img src="./static/img/defect/quejiaoImage0001.png" alt="缺角破损图片" class="w-full h-auto">
                    </div>
                    <h3 class="text-xl font-bold mb-3">掉角/破损</h3>
                    <p class="text-gray-600">
                        检测产品边角是否存在破损、缺失等缺陷，确保产品完整性。
                    </p>
                </div>
                
                <!-- 缺陷类型2 -->
                <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                    <div class="rounded-lg bg-warning/10 flex items-center justify-center mb-6">
                        <img src="./static/img/defect/liewenImage0001.png" alt="裂纹图片" class="w-full h-auto">
                    </div>
                    <h3 class="text-xl font-bold mb-3">裂纹</h3>
                    <p class="text-gray-600">
                        检测产品表面的微小裂纹，包括线性裂纹、网状裂纹等不同类型。
                    </p>
                </div>
                
                <!-- 缺陷类型3 -->
                <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                    <div class="rounded-lg bg-primary/10 flex items-center justify-center mb-6">
                        <img src="./static/img/defect/shayanImage0026.png" alt="砂眼图片" class="w-full h-auto">
                    </div>
                    <h3 class="text-xl font-bold mb-3">砂眼/气孔</h3>
                    <p class="text-gray-600">
                        识别产品表面的砂眼、气孔等缺陷，检测精度可达到微米级别。
                    </p>
                </div>
                
                <!-- 缺陷类型4 -->
                <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                    <div class="rounded-lg bg-secondary/10 flex items-center justify-center mb-6">
                        <img src="./static/img/defect/qipaoImage0001.png" alt="起泡图片" class="w-full h-auto">
                    </div>
                    <h3 class="text-xl font-bold mb-3">镀层起泡</h3>
                    <p class="text-gray-600">
                        检测产品表面镀层是否存在起泡、脱落等缺陷，确保镀层质量。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <script>
        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 100) {
                navbar.classList.add('bg-white', 'shadow-md');
                navbar.classList.remove('bg-transparent');
            } else {
                navbar.classList.remove('bg-white', 'shadow-md');
                navbar.classList.add('bg-transparent');
            }
        });
        
        // 移动端菜单
        const menuBtn = document.getElementById('menuBtn');
        const mobileMenu = document.getElementById('mobileMenu');
        menuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动端菜单
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });
    </script>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    // 是否选择检测正面，否则为检测侧面。
                    detectionSide: 'front',
                    exampleImage: "https://www.jhjyxx.cn/attachment/image/default/2025-07-22/f6591494309549058fe76dcbb5804848.jpg",
                    enableShowPreviewImage: true,
                    showDefectType: location.protocol !== 'https:',
                    detecting: false,
                    options: {
                        enableAutoDefect: location.protocol !== 'https:',

                        // 检测内容选项
                        detectChipping: true,
                        detectCrack: true,
                        detectBubble: true,
                        detectPit: true,
                    },

                    files: [],
                    images: [],
                    results: [],
                }
            },
            computed: {
                detectFront() {
                    return this.detectionSide === 'front';
                },
                detectMode() {
                    return this.detectionSide === 'front' ? '正面' : '侧面';
                },
                detectOptions() {
                    const mapping = {
                        detectChipping: 'chipping',
                        detectCrack: 'crack',
                        detectBubble: 'bubble',
                        detectPit: 'pit'
                    };

                    return Object.keys(mapping).filter(key => this.options[key]).map(key => mapping[key]);
                },
                disableDetect() {
                    return !this.images?.length || this.detecting;
                },
            },
            watch: {
                results(value) {
                    if (value && value.length) {
                        this.$nextTick(() => {
                            value.forEach((item, index) => {
                                const canvasElement = document.getElementById("canvas-" + index);

                                processResult(item, this.images[index], canvasElement)
                            })
                        })
                    }
                }
            },
            methods: {
                activeSelectImage() {
                    this.$refs.imageInput.click();
                },
                removeImage() {
                    this.$refs.imageInput.value = null;

                    this.files = [];
                    this.images = [];
                    this.results = [];
                },
                onFileChange(event) {
                    const element = event.target;

                    this.files = element.files;

                    this.images.forEach(url => URL.revokeObjectURL(url));
                    this.images = Array.from(this.files).map(file => URL.createObjectURL(file));

                    if (this.options.enableAutoDefect && element.files.length) {
                        this.uploadAndDefect();
                    }
                },
                uploadAndDefect() {
                    // 在检测中或者没有选择检测选项则返回
                    if (this.detecting) return;
                    if (!this.detectOptions.length) {
                        alert("请先勾选检测选项");
                        return;
                    }

                    this.detecting = true;

                    // console.log("options:", this.options);
                    // console.log("detectOptions: ", this.detectOptions);

                    defectApi(this.files, {
                        model: "lixin-" + this.detectionSide,
                        detectionSide: this.detectionSide,
                        detectOptions: this.detectOptions,
                    }).then(data => {
                        if (debugMode) {
                            console.log("data: ", data);
                        }

                        this.results = processDefectResults(data);
                    })
                    .catch(error => {
                        alert("发生错误: " + error.message);
                        console.error("预测请求失败:", error);
                    }).finally(() => {
                        this.detecting = false;
                    });
                },
                toggleDebugMode() {
                    debugMode = !debugMode;
                },
            },
        }).mount("#detect-app");
    </script>

    <script>
        const exampleApp = Vue.createApp({
            data() {
                return {
                    examples: [
                        {
                            title: '产品检测',
                            image: './static/img/defect/quejiaoImage.png',
                            defects: [
                                {
                                    // 缺陷类型
                                    typeId: 0,
                                    typeName: "quejiao",
                                    typeLabel: "掉角/破损",
                                    // 缺陷等级
                                    level: 3,
                                    levelLabel: "严重",
                                    confidence: 1,
                                    // 缺陷位置
                                    location: {
                                        x: 745,
                                        y: 169
                                    },
                                    // 缺陷尺寸
                                    size: {
                                        width: 3,
                                        height: 4
                                    }
                                }
                            ]
                        },
                        {
                            title: '产品检测',
                            image: './static/img/defect/liewenImage.png',
                            defects: [
                                {
                                    "typeId": 2,
                                    "typeName": "liewen",
                                    "typeLabel": "裂纹",
                                    "level": 3,
                                    "levelLabel": "严重",
                                    "confidence": 0.12362253665924072,
                                    "location": {
                                        "x": 810,
                                        "y": 375
                                    },
                                    "size": {
                                        "width": 2,
                                        "height": 5
                                    }
                                }
                            ]
                        },
                    ]
                };
            },
            methods: {}
        }).mount("#examples-app");
    </script>

    <script>
        function processDefectResults(results=[]) {
            if (!results || !results.length) return results;

            //  mm/pixel
            const horizontal_resolution = 0.02;
            const vertical_resolution = 0.02;

            results.forEach(result => {
                const horizontalRatio = result.image.horizontalRatio;
                const verticalRatio = result.image.verticalRatio;
                const categoryNames = ['quejiao', 'qipao', 'liewen', 'shayan'];

                result.defects = result.defect_boxes.map(box => {
                    return {
                        // 缺陷类型
                        typeId: box.categoryId,
                        typeName: box.categoryName,
                        typeLabel: box.categoryLabel,
                        // 缺陷等级
                        level: "1",
                        // levelLabel: "一般",
                        confidence: box.confidence,
                        // 缺陷位置
                        location: {
                            x: Math.round(box.x1 * horizontalRatio),
                            y: Math.round(box.y1 * verticalRatio),
                        },
                        // 缺陷尺寸
                        size: {
                            width: Math.round((box.x2 - box.x1) * horizontalRatio * vertical_resolution),
                            height: Math.round((box.y2 - box.y1) * verticalRatio * horizontal_resolution),
                        },
                    }
                });
            });

            // console.log(results);

            return results;
        }
    </script>
</body>
</html>